<template>
  <view class="sound-detail wh-full bg-#fff">
    <view class="position-relative w-full box-border p-22rpx text-32 text-#333 font-800">
      <!-- 强省会 勇担当 幸福开福宣讲人（第7期） -->
      <view class="ml-30% w-500rpx truncate">
        {{ detailData?.article_title }}
      </view>
      <!-- <video
        @loadedmetadata="onVideoLoad"
        src="http://alimailbhrlbg.kindoucloud.com/asset/4c86d08aac39742a5ab1b6694ad6b89b/d88b63b5468aba056fa140ebb12fe9ca.mp4"
        controls /> -->
      <view class="flex text-red position-absolute left-0 top-50% translate-y-[-50%]">
        <u-icon name="arrow-left" size="20" color="red" bold></u-icon>
        <a class="no-underline text-current" href="http://m.csjwsq.com/info/infolist.html">返回</a>
      </view>
    </view>
    <view class="text-26rpx text-#d82821 text-right mb-20rxp">
      | {{ detailData?.article_subtitle }}
    </view>
    <view class="w-full h-358rpx my-20rpx">
      <!-- widthFix -->
      <img class="w-full h-358rpx" :src="getDetailLog(detailData)" mode="" />
    </view>
    <!-- 介绍 -->
    <view class="py-18rpx mb-52rpx border-1px border-solid border-#cb313f custom-box-shadow text">
      <img
        class="w-70rpx h-35rpx"
        mode="widthFix"
        src="https://kindoucloud.com:8077/api/mongoFile/previewImage/jwsq/657ea7736affce1e6fd24a31" />
      <view class="p-20rpx box-border text-26rpx leading-40rpx text-#d82821">
        {{ detailData?.title_introduction }}
      </view>
    </view>

    <!-- <view class="show-title flex flex-items-center">
      <view class="title-icon"></view>
      <span class="text-30rpx text-#d82821 ml-20rpx font-bold h-50rpx leading-50rpx">
        {{ detailData?.title }}
      </span>
    </view> -->

    <view class="w-full h-348rpx flex flex-items-center my-20rpx">
      <image class="w-310rpx h-full flex-shrink-0" :src="getImageUrl(detailData)" mode="" />
      <view class="bg-#F9E4E3 position-relative flex-1">
        <view class="text-center my-30rpx">
          <view class="my-20rpx text-#171717 text-32 font-800">{{
            detailData?.detail_reader
          }}</view>
          <view class="my-20rpx font-500">{{
            '[ ' + (detailData?.job_title || '暂无') + ' ]'
          }}</view>
          <view class="my-20rpx text-30 font-500">{{ detailData?.office || '暂无' }}</view>
        </view>
        <image
          class="w-358rpx h-164rpx flex-shrink-0 position-absolute bottom-0 right-0"
          src="https://kindoucloud.com:8077/api/mongoFile/previewImage/jwsq/65a5fd148253fd140d862cc5"
          mode="widthFix" />
      </view>
    </view>

    <view class="text-#333 my-20rpx text-26 leading-40rpx">
      <span class="font-800 leading-40rpx">【讲述】</span>{{ detailData?.user_tell || '暂无' }}
    </view>

    <view class="sound-detail-content">
      <u-parse :content="detailData?.rich_content" :tagStyle="style"></u-parse>
    </view>

    <!-- 音频视频展示 -->
    <view class="sound-detail-show my-30rpx">
      <template v-if="detailData?.type === '音频'">
        <SyAudio
          ref="audio"
          isCountDown
          :src="detailData?.src"
          :audioTitle="`${detailData?.article_title}--${detailData?.detail_reader}`"
          :audioCover="imageUrl"
          :subheading="detailData?.sub_title"
          backgroundColor="#EBEBEB"></SyAudio>
        <view class="w-full mt-20rpx text-center text-#d82821 text-28">
          宣讲人/ {{ detailData?.detail_reader }}
        </view>
      </template>
      <template v-else>
        <view class="video-container" ref="videoContainer">
          <!--  object-fit="fill" object-fit="cover" height: videoHeight + 'px'  -->
          <!-- <div>{{ detailData?.src }}</div> -->
          <!-- @loadeddata="onVideoLoad" -->
          <video
            id="myVideo"
            @loadedmetadata="onVideoLoad"
            :style="{ height: videoHeight + 'px' }"
            :src="detailData?.src"
            controls />
        </view>
      </template>

      <view class="audio-footer">(点击收听)</view>
    </view>

    <!-- 分享按钮 -->
    <button class="share-btn" @click="shareEvn">分享</button>
    <!-- 模态框 -->
    <u-modal :show="show" content="123" @confirm="confirm" @cancel="cancel">
      <qrcode-vue :value="value" :level="level" :size="size"></qrcode-vue>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
import { getPublicModelInfo } from '@/api'
import type { DetailData } from '@/api/type/detail'
import QrcodeVue, { Level } from 'qrcode.vue'
import { onReady } from '@dcloudio/uni-app'
import SyAudio from '@/components/sy-audio/components/sy-audio/sy-audio.vue'
import { DataInfo } from '../../types/request'

const style = {
  p: 'color: #622C2F;font-size: 30rpx;line-height: 40rpx;text-align: justify;',
}

const urlId = ref('')

const reqNumber = ref(0)
// 设置视频父容器宽高
const parentsWidth = ref(0)
const videoHeight = ref(0)

// 模态框
const show = ref<boolean>(false)
// 二维码
// const value = ref<String>('https://www.baidu.com')
// const value = ref<String>('http://kindoucloud.com:8070?id=65712696262fbe2d9d0a87bf')
const value = ref<String>('http://kindoucloud.com:8070/?id=65a49387bf9eb569911780c3')
const level = ref<Level>('M')
const size = ref<number>(200)
// 定义请求数据
const detailData = ref({} as DetailData)

// 获取完整图片地址
const getImageUrl = (data: DetailData): string => {
  return import.meta.env.VITE_BASE_API + data.log?.[0]?.url
}
const getDetailLog = (data: DetailData): string => {
  return import.meta.env.VITE_BASE_API + data.detail_log?.[0]?.url
}

const imageUrl = computed(() => getImageUrl(detailData.value!))

const shareEvn = () => {
  show.value = true
}

const confirm = () => {
  show.value = false
}

const cancel = () => {
  show.value = false
}
const onVideoLoad = (e: any) => {
  getContainerWidth(e.detail)
  console.log('onVideoLoad', e)
}
const getContainerWidth = async (data: { width: number; height: number; duration: number }) => {
  try {
    const videoSize = data
    const query = uni.createSelectorQuery()
    query
      .select('.video-container')
      .boundingClientRect(rect => {
        const { width = 0 } = rect as UniApp.NodeInfo
        parentsWidth.value = width
        videoHeight.value = (videoSize.height / videoSize.width) * width
      })
      .exec()
  } catch (error) {
    console.log(error)
  }
}

const getVideoSize = (url: string, size = 200) => {
  reqNumber.value++
  return new Promise((resolve, reject) => {
    uni.downloadFile({
      url,
      header: {
        Range: `bytes=0-${size}000`,
      },
      success: res => {
        console.log('下载成功', res)
        uni.getVideoInfo({
          src: res.tempFilePath,
          success: ({ width, height }) => {
            console.log('width', width, 'height', height)

            if (!width || !height) {
              if (reqNumber.value > 3) {
                reject({ msg: '下载视屏失败' })
                return
              }

              // resolve(getVideoSize(url, size + 20))
            }

            resolve({ width, height })
          },
          fail: err => {
            console.log(err)

            // reject(err)
            // resolve(getVideoSize(url, size + 20))
          },
        })
      },
      fail: err => {
        reject(err)
      },
    })
  })
}

onLoad(async options => {
  urlId.value = options!.id as string

  const result = await getPublicModelInfo<DetailData>(
    '6571251d262fbe2d9d0a826b',
    decodeURIComponent(urlId.value)
  )

  value.value = `http://kindoucloud.com:8070/?id=${decodeURIComponent(urlId.value)}`

  detailData.value = result.data as unknown as DetailData

  // getContainerWidth(result.data?.src as string)
})
</script>

<style lang="scss" scoped>
.custom-box-shadow {
  box-shadow: 0rpx 5rpx 0rpx 1rpx rgba(216, 40, 33, 0.3);
}
.sound-detail {
  background: #fff;
  padding: 20rpx;

  /* 按钮去掉边框 */
  button::after {
    border: none;
  }

  button {
    height: auto; //支付宝需要加
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    font-size: 28rpx;
    line-height: 1;
    color: #1c1c1c;
    background: none;
    border: none; //支付宝需要加
  }

  .button-hover {
    color: #1c1c1c;
    background: none;
  }

  .poster-img {
    width: 40%;
  }

  /* 每个页面公共css */
  .content {
    height: 100%;
    text-align: center;
  }

  .share-btn {
    padding: 30rpx 60rpx;
    color: #fff;
    background-color: #537eef;
  }

  .share-pro {
    z-index: 5;
    display: flex;
    line-height: 1;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;

    .share-pro-mask {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }

    .share-pro-dialog {
      position: relative;
      position: fixed;
      bottom: 0;
      width: 750rpx;
      height: 310rpx;
      overflow: hidden;
      background-color: #fff;
      border-radius: 24rpx 24rpx 0 0;
      box-sizing: border-box;

      .close-btn {
        position: absolute;
        top: 0rpx;
        right: 29rpx;
        padding: 20rpx 15rpx;
      }

      .share-pro-title {
        padding: 28rpx 41rpx;
        font-size: 28rpx;
        color: #1c1c1c;
        background-color: #f7f7f7;
      }

      .share-pro-body {
        display: flex;
        font-size: 28rpx;
        color: #1c1c1c;
        flex-direction: row;
        justify-content: space-around;

        .share-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          justify-content: space-around;

          .share-icon {
            margin-top: 39rpx;
            margin-bottom: 16rpx;
            font-size: 70rpx;
            color: #42ae3c;
            text-align: center;
          }

          &:nth-child(2) {
            .share-icon {
              color: #ff5f33;
            }
          }
        }
      }
    }

    /* 显示或关闭内容时动画 */

    .open {
      transform: translateY(0);
      transition: all 0.3s ease-out;
    }

    .close {
      transform: translateY(310rpx);
      transition: all 0.3s ease-out;
    }
  }

  .model-empty {
    width: 500rpx;
    height: 480rpx;
  }

  .show-title {
    .title-icon {
      width: 50rpx;
      height: 50rpx;
      background: url('https://kindoucloud.com:8077/api/mongoFile/previewImage/jwsq/657ea9106affce1e6fd24a33');
      background-size: cover;
    }

    .title {
      font-size: 30rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-weight: bold;
      color: #d82821;
      margin-left: 20rpx;
    }
  }

  &-show {
    width: 100%;
    // height: 350rpx;
    padding-bottom: 100rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 16rpx 1rpx rgba(177, 177, 177, 0.4);
    border-radius: 20rpx;
    position: relative;

    .video-container {
      width: 100%;

      > video {
        width: 100%;
        // height: auto;
      }
    }

    .audio-footer {
      position: absolute;
      bottom: 20rpx;
      width: 100%;
      text-align: center;
      color: #d82821;
      font-size: 28rpx;
    }

    .video {
      padding: 20rpx;
      box-sizing: border-box;
      // box-shadow: 0rpx 6rpx 16rpx 1rpx rgba(177, 177, 177, 0.3);
      border-radius: 10rpx;

      &-image {
        flex-shrink: 0;
        margin-right: 30rpx;
      }

      &-right {
        width: 100%;
        font-size: 22rpx;
        color: #919191;

        .right-title {
          font-size: 28rpx;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          margin-right: 20rpx;
        }
      }
    }
  }

  &-content {
    margin: 40rpx 0;
    font-size: 28rpx;
    color: #333;
  }
}
</style>
